<template>
  <div>
    <button v-if="show" @click="fn1">登录</button>
    <input v-else ref="txt" type="text" placeholder="请输入账号" />

    <button @click="show = true">返回登录</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true,
    };
  },
  methods: {
    /*
    fn1 () {
      // 隐藏按钮，显示出输入框,渲染出来了
      // Vue里的渲染界面，都是异步渲染
      // 异步：一定要等同步执行完了才执行异步

      // 这句代码是同步代码，这里仅仅只是对数据发生了改变，但是界面还没重新渲染
      this.show = false

      // 这句代码也是同步代码
      // console.log(this.$refs.txt)
      // this.$refs.txt.focus()
      // 把这个代码改成异步，那么就按异步队列来执行了

      // 用setTimeout可以，但是时间不好写
      // setTimeout(() => {
      //   this.$refs.txt.focus()
      // }, 100);

      // Vue提供了一个回调函数叫 $nextTick
      // 他的触发时机是，等本次dom更新完毕会自动调用
      // 本质相当于是setTimeout，但是延迟时间不用你自己写，vue内部会自己分配时间（分配成dom更新完的时间）
      this.$nextTick( () => {

        // 当本次dom更新后触发
        this.$refs.txt.focus()
      })
    }
    */

    async fn1() {
      // 隐藏了按钮，显示出输入框
      this.show = false;
      // 让本次dom渲染完，让输入框获得焦点
      //  this.$nextTick( () => {
      //     this.$refs.txt.focus()
      //  })
      // 其实$nextTick是用promise封装的，所以可以用.then
      // 可以用 async + await
      await this.$nextTick()

      this.$refs.txt.focus();
    },
  },

  // 虽然他能实现，但是不推荐用这个钩子
  // 其他数据改变，他也会调用
  // 总而言之：所有在界面上渲染的数据改变都会调用这个钩子
  // 这样就容易报错，其次是浪费性能
  // updated () {
  //   this.$refs.txt.focus()
  // }
};
</script>

<style>
</style>